<template>
	<view class="players-page bgimg3 ">
		<u-navbar title="Popular Players" :autoBack="false" bg-color="transparent" leftIconColor="#ffffff"
			:titleStyle="{'color':'#ffffff'}" @leftClick="leftClick"></u-navbar>
		<u-gap height="150" bgColor="transparent"></u-gap>
		<view
			class="rounded-top-max-lg bg-white py-3 px-2 flex flex-wrap justify-between overflow-y players-list box-sizing">
			<block v-for="(item,index) in dataList" :key="index">
				<itemCardVue :index="index" :item="item"></itemCardVue>
			</block>
		</view>
	</view>
</template>

<script>
	import HttpApi from '@/api/httpApi';
	import itemCardVue from './components/item-card.vue';
	export default {
		components: {
			itemCardVue
		},
		data() {
			return {
				page: 1,
				dataList: [],
				tempList: [],
			}
		},
		onLoad() {
			this.playerPopular()
		},
		onReachBottom() {
			if (this.tempList.length < 20) return
			this.page++
			this.playerPopular()
		},
		methods: {
			playerPopular() {
				HttpApi.playerPopular({
					page: this.page,
					limit: 90
				}).then(res => {
					if (res.code === 1) {
						const list = res.data.list || []
						this.tempList = list
						if (this.page === 1) {
							this.dataList = list
						} else {
							this.dataList = this.dataList.concat(list)
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.players-page {
		.players-list {
			height: calc(100dvh - 80px);
		}
	}
</style>